<template>
  <div>
    <div class="full">
      <div class="container">
        <!-- 左侧导航栏 -->
        <div class="warp">
          <div class="warp-left">
            <div class="establish">
              <span>我的创建</span>
              <el-icon class="arrow"><arrow-up /></el-icon>
            </div>
            <div
              v-for="item in CreatedCollect.list"
              :key="item.id"
              class="favorites"
              :class="currentId === item.id && 'active'"
              @click="currentId = item.id"
            >
              <el-icon class="icon" :size="18"><folder /></el-icon>
              <span>{{ item.title }}</span>
              <span class="number">{{ item.media_count }}</span>
            </div>
            <div class="spilt"></div>
            <div class="establish">
              <span>我的收藏和订阅</span>
              <el-icon class="arrow"><arrow-up /></el-icon>
            </div>
            <div class="conversation favorites">
              <el-icon class="icon" :size="18"><folder /></el-icon>
              <span>话题收藏夹</span>
              <span class="number">0</span>
            </div>
            <div class="special favorites">
              <el-icon class="icon" :size="18"><folder /></el-icon>
              <span>专题收藏夹</span>
              <span class="number">0</span>
            </div>
            <div class="special-column favorites">
              <el-icon class="icon" :size="18"><folder /></el-icon>
              <span>专栏收藏夹</span>
              <span class="number">0</span>
            </div>
            <div class="album favorites">
              <el-icon class="icon" :size="18"><folder /></el-icon>
              <span>相簿收藏夹</span>
              <span class="number">0</span>
            </div>
            <div class="curriculum favorites">
              <el-icon class="icon" :size="18"><folder /></el-icon>
              <span>课程收藏夹</span>
              <span class="number">0</span>
            </div>
            <div class="notebook favorites">
              <el-icon class="icon" :size="18"><folder /></el-icon>
              <span>我的笔记本</span>
              <span class="number">0</span>
            </div>
            <div class="spilt"></div>

            <!-- <div class="later favorites">
              <span>稍后在看</span>
            </div> -->
          </div>
          <!-- 右侧内容 -->
          <div class="warp-right" v-loading="lodaing">
            <!-- 右侧头部样式 -->
            <div class="fixed-point">
              <div class="header-top">
                <div class="header-img">
                  <img class="img" :src="videoListInfos.cover" />
                </div>
                <div class="header-text">
                  <div class="fav-margin">
                    <span class="fav-name fav">{{ videoListInfos.title }}</span>
                  </div>
                  <div class="fav-margin">
                    创建者：{{ videoListInfo.name }}　播放数：{{ videoListPlay.play }}
                  </div>
                  <div class="fav-margin">
                    <span class="fav-meta fav">
                      {{ videoListInfos.media_count }}个内容　·　公开
                    </span>
                  </div>
                  <div>
                    <button class="btn">
                      <el-icon class="btn-icon" :size="20"><caret-right /></el-icon>
                      播放全部视频
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 右侧中间样式 -->
            <div class="header-footer">
              <div class="fav-filters">
                <div class="fav-filters-text">
                  <span>批量操作</span>
                </div>
                <div class="fav-filters-text">
                  <span>全部分区</span>
                  <el-icon class="filters-text-icon"><arrow-down /></el-icon>
                </div>
                <div class="fav-filters-text">
                  <span>最近收藏</span>
                  <el-icon class="filters-text-icon"><arrow-down /></el-icon>
                </div>
                <div class="filters-search">
                  <div class="filters-arrow">
                    当前
                    <!-- <el-icon class="filters-icon"><arrow-down /></el-icon> -->
                  </div>
                  <div class="filters-input-search">
                    <input
                      class="filters-input"
                      style="outline: none"
                      type="text"
                      placeholder="输入关键词搜索"
                    />
                    <!-- <el-icon class="search" :size="20"><search /></el-icon> -->
                  </div>
                </div>
              </div>
            </div>
            <!-- 右侧底部样式 -->
            <div class="list">
              <div
                class="video-container"
                v-for="item in videoLists.medias"
                :key="item.id"
                @click="$router.push({ name: 'Video', query: { aid: item.id, bvid: item.bvid } })"
              >
                <div class="video-list">
                  <div class="video-list-img">
                    <img class="video-img" :src="item.cover" alt="" />
                    <!-- <img class="video-img" :src="videoLists.cover" alt="" /> -->
                  </div>
                  <div class="video-item">
                    <span>{{ moment(item.duration * 1000).format('mm:ss') }}</span>
                  </div>
                  <!-- 遮罩层样式 -->
                  <div class="mask">
                    <p class="view">播放：{{ item.cnt_info.play }}</p>
                    <!-- <p class="view">播放：14.8万</p> -->
                    <p class="favorite">收藏：{{ item.cnt_info.collect }}</p>
                    <!-- <p class="favorite">收藏：3866</p> -->
                    <p class="author">UP主：{{ item.upper.name }}</p>
                    <!-- <p class="author">UP主：11111</p> -->
                    <p class="update">投稿：{{ moment(item.ctime * 1000).format('MM-DD') }}</p>
                    <!-- <p class="update">投稿：11-26</p> -->
                  </div>
                </div>
                <div class="video-text">
                  {{ item.title }}
                  <!-- {{ _rawValue.medias.title }} -->
                </div>
                <div class="video-text-bottom">
                  收藏于：{{ moment(item.fav_time * 1000).format('MM-DD') }}
                </div>
              </div>
            </div>
            <!-- 分页器 -->
            <!-- <div class="demo-pagination-block">
            <ElPagination
              background
              :page-sizes="[5, 10, 15, 20]"
              :page-size="20"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            />
          </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import moment from 'moment'
  import { onMounted, defineComponent, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import { reqCreatedCollect, reqCollectionList, reqCollectionInfo } from '@/api/collection'

  import type {
    CreatedCollectModel,
    list,
    play,
    CollectionInfoModel,
    CollectionListModel,
  } from '@/api/collection'

  export default defineComponent({
    name: 'Collection',
  })
</script>

<script lang="ts" setup>
  import { Folder, ArrowUp, ArrowDown, CaretRight } from '@element-plus/icons'
  import { ref, reactive } from 'vue'

  const route = useRoute()

  const hostMid = Number(route.query.hostMid)

  const CreatedCollect = ref<Partial<CreatedCollectModel>>({})
  const videoLists = reactive<Partial<CollectionListModel>>({})
  const videoListInfo = ref<Partial<list>>({})
  const videoListInfos = ref<Partial<CollectionInfoModel>>({})
  const videoListPlay = ref<Partial<play>>({})

  const currentId = ref(0)
  const lodaing = ref(false)

  onMounted(async () => {
    // getCollection('1111')

    const res = await reqCreatedCollect(hostMid)
    CreatedCollect.value = res
    currentId.value = res.list[0].id
  })

  watch(currentId, async (id) => {
    lodaing.value = true
    getCollectionInfo(id)
    await CollectionFun(id)
    lodaing.value = false
  })

  // 左侧创建文件夹
  // async function getCollection(title: string) {
  //   const videoCollections = await reqCollection(title)
  //   videoCollection.value = videoCollections
  //   console.log('videoCollections', videoCollections)
  // }

  // 左侧创建文件的数量
  async function getCollectionInfo(media_id: number) {
    const collectionInfo = await reqCollectionInfo(media_id)
    videoListInfos.value = collectionInfo
    videoListInfo.value = collectionInfo.upper
    videoListPlay.value = collectionInfo.cnt_info
  }

  // 右侧视频列表数据
  async function CollectionFun(media_id: number) {
    const { medias } = await reqCollectionList(media_id)
    videoLists.medias = medias
  }
</script>

<style lang="less" scoped>
  .spilt {
    margin: 5px 0;
    height: 1px;
    background-color: #eaebecf6;
  }
  .full {
    width: 100%;
    min-width: 1200px;

    .container {
      width: 1200px;
      margin: 0 auto;
      background-color: #fff;
    }
    .warp {
      display: flex;
      width: 100%;
      // height: 1200px;
      margin: 0;
    }
    .warp-left {
      width: 230px;
      // height: 390px;
      border: 1px solid #eaebecf6;
      // border-bottom: none;
      box-sizing: border-box;
    }
    .establish {
      position: relative;
      width: 100%;
      height: 54px;
      line-height: 54px;
      font-size: 14px;
      color: #99a2aa;
      // text-align: center;
      padding-left: 20px;
      cursor: pointer;
      box-sizing: border-box;

      .arrow {
        position: absolute;
        right: 20px;
        top: 20px;
      }
    }
    .favorites {
      width: 100%;
      height: 44px;
      line-height: 44px;
      // text-align: center;
      font-size: 14px;
      color: #222;
      padding-left: 20px;
      margin-right: 5px;
      box-sizing: border-box;
      cursor: pointer;

      .icon {
        width: 26px;
        height: 26px;
        color: #99a2aa;
        margin-right: 9px;
      }
      .number {
        width: 32px;
        height: 20px;
        font-size: 14px;
        color: #99a2aa;
        line-height: 20px;
        text-align: center;
        padding: 0 10px;
        // border: 1px solid;
      }

      &.active {
        background-color: #00a1d6;
        color: #fff;
        .icon {
          color: #fff;
        }
        .number {
          color: #fff;
        }
      }
    }
    .later {
      display: block;
      box-sizing: border-box;
      padding-right: 70px;
      color: #99a2aa;
      border-top: 1px solid #e4e9f0;
      border-bottom: 1px solid #e4e9f0;
    }
    // 右侧内容样式
    .warp-right {
      width: 971px;
      // height: 1114px;
      border: 1px solid #e4e9f0;
      box-sizing: border-box;
      .header-top {
        display: flex;
        width: 930px;
        padding: 20px 0;
        margin: 0 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #e4e9f0;
      }
    }
    .header-img {
      width: 190px;
      height: 119px;
      line-height: 119px;
      // border: 1px solid;
      // background-color: aquamarine;
      box-sizing: border-box;
      .img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }
    .header-text {
      width: 370px;
      height: 119px;
      margin: 0 0 0 18px;
      // border: 1px solid;
      // box-sizing: border-box;
    }
    .fav-margin {
      margin-bottom: 10px;
    }
    .fav {
      width: 100%;
      height: 20px;
      // border: 1px solid;
      // box-sizing: border-box;
    }
    .fav-up-name .fav-meta {
      color: #99a2aa !important;
      font-size: 12px;
    }
    .fav-name {
      color: #000 !important;
      font-size: 14px;
    }
    .btn {
      position: relative;
      width: 120px;
      height: 32px;
      line-height: 32px;
      color: #fff;
      font-size: 14px;
      padding-left: 6px;
      border: none;
      border-radius: 3px;
      background-color: #00a1d6;
      cursor: pointer;
      .btn-icon {
        position: absolute;
        top: 6px;
        left: 2px;
      }
    }
    // 右侧中间样式
    .header-footer {
      position: relative;
      width: 930px;
      height: 30px;
      margin: 15px 20px 0 20px;
    }
    .fav-filters {
      position: absolute;
      display: flex;
      line-height: 30px;
      right: 30px;
    }
    .fav-filters-text {
      margin-right: 26px;
      color: #222;
      font-size: 14px;
      .filters-text-icon {
        width: 16px !important;
        height: 20px !important;
        line-height: 20px;
        margin-left: 3px;
        top: 2px;
      }
    }
    .filters-search {
      display: flex;
      width: 231px;
      height: 32px;
      line-height: 32px;
      border-radius: 50px;
      border: 1px solid #99a2aa;
      box-sizing: border-box;
    }
    .filters-arrow {
      border-right: 1px solid #99a2aa;
      padding: 0 5px;
      font-size: 12px;
    }
    .filters-input {
      height: 28px;
      padding-left: 15px;
      border: none;
    }
    .search {
      color: #99a2aa;
      top: 3px;
    }
    // 右侧底部
    .list {
      overflow: hidden;
      width: 950px;
      // height: 774px;
      margin: 20px 20px 50px 20px;
      // border: 1px solid #99a2aa;
    }
    .video-container {
      display: inline-block;
      width: 160px;
      height: 166px;
      margin: 0 30px 20px 0;
      cursor: pointer;
      // border: 1px solid;
    }
    .video-list {
      width: 160px;
      height: 100px;
      position: relative;
      .video-img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
    }
    .mask {
      position: absolute;
      top: 0;
      // left: 20px;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      width: 160px;
      height: 100px;
      text-align: left;
      opacity: 0;
      font-size: 14px;
      padding: 15px 0 0 20px;
      border-radius: 5px;
      box-sizing: border-box;
      // border: 1px solid;
    }
    .mask:hover {
      opacity: 1;
    }
    .video-item {
      width: 30px;
      height: 20px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 5px;
      color: #fff;
      line-height: 20px;
      transition: top 0.2s ease;
      padding: 0 6px;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .author {
      width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .video-text {
      overflow: hidden;
      width: 158px;
      height: 38px;
      line-height: 20px;
      text-align: left;
      color: #222;
      font-size: 12px;
      margin-top: 6px;
    }
    .video-text-bottom {
      width: 158px;
      height: 14px;
      line-height: 14px;
      color: #999;
      font-size: 12px;
      margin-top: 6px;
    }
    // 分页器
    .demo-pagination-block {
      text-align: center;
    }
  }
</style>
